<template> 
	<div style="background: #ececf5;box-sizing: border-box;padding: 24px 24px;height: 100%;width: 1707px;">
		<div v-if="show_type == 0">
			<div class="home-left">
				<div class="home-left-top">
					<div style="overflow: hidden;">
						<div class="home-title">换电站统计</div>
						<div class="home-right-btnbox">

							<button @click="change_time(2)" :class="[{'btnbox-active':time_show==2}]">昨日</button>
							<button @click="change_time(3)" :class="[{'btnbox-active':time_show==3}]">近七天</button>
							<button @click="change_time(4)" :class="[{'btnbox-active':time_show==4}]">近一月</button>
						</div>
					</div>
					<div style="margin: 0 20px;">
						<div class="data-item data-item-1">
							<div>{{cishuzongji}}</div>
							<span>换电次数</span>
						</div>
						<div class="data-item data-item-2">
							<div>{{lichengzongji}}</div>
							<span>换电里程</span>
						</div>
						<div class="data-item data-item-3">
							<div>{{yingshouzongji}}</div>
							<span>换电站营收(元)</span>
						</div>
					</div>

				</div>
				<div class="home-left-bottom">
					<div style="overflow: hidden;">
						<div class="chart-btnbox">
							<button @click="change_show(1)" :class="[{'chart-btnbox-active':switch_show==1}]">换电站营收</button>
							<button @click="change_show(2)" :class="[{'chart-btnbox-active':switch_show==2}]">换电次数</button>
							<button @click="change_show(3)" :class="[{'chart-btnbox-active':switch_show==3}]">换电里程</button>
						</div>
						<div class="home-right-btnbox">
							<button @click="change_c(2)" :class="[{'btnbox-active':c_time_show==2}]">昨日</button>
							<button @click="change_c(1)" :class="[{'btnbox-active':c_time_show==1}]">今日</button>
							<button @click="change_c(3)" :class="[{'btnbox-active':c_time_show==3}]">近七天</button>
							<button @click="change_c(4)" :class="[{'btnbox-active':c_time_show==4}]">近一月</button>
						</div>
					</div>
					<div id="myChart" style="width: 100%; height: 400px;z-index: 999;margin-top: 36px;"></div>
				</div>
			</div>
			<div class="home-right">
				<div class="home-title">待办事项</div>
				<div class="gongdang-list" style="">
					<div class="home-right-item" @click="show_work_detail()" v-for="(item,index) in tableData" style="">
						<div class="h-item-1">{{index+1}}
						</div>
						<div class="h-item-2">
							<span>{{item.status_dictText}}</span>
							<div>{{item.type_dictText}}</div>
						</div>
						<div class="h-item-3">
							{{item.create_date}}
							<!-- 2020-01-01 12:12:12 -->
						</div>
					</div>
				</div>

			</div>
		</div>
		<div v-else-if="show_type == 1">
			<div class="home-left">
				<div class="home-left-top">
					<div style="overflow: hidden;">
						<div class="home-title">车辆统计</div>
						<!-- <div class="home-right-btnbox">
							<button @click="change_time(2)" :class="[{'btnbox-active':c_time_show==2}]">昨日</button>
							<button @click="change_time(3)" :class="[{'btnbox-active':c_time_show==3}]">近七天</button>
							<button @click="change_time(4)" :class="[{'btnbox-active':c_time_show==4}]">近一月</button>
						</div> -->
					</div>
					<div style="margin: 0 20px;">
						<div class="data-item data-item-1">
							<div>{{c_xingshilicheng}}</div>
							<span>行驶里程(km)</span>
						</div>
						<div class="data-item data-item-2">
							<div>{{c_huandiancishu}}</div>
							<span>换电次数</span>
						</div>
						<div class="data-item data-item-3">
							<div>{{c_huandianjine}}</div>
							<span>换电订单金额(元)</span>
						</div>
					</div>

				</div>
				<div class="home-left-bottom">
					<div style="overflow: hidden;">
						<div class="home-title">车辆行驶里程</div>
 
						<div class="home-right-btnbox">
							<button @click="change_xingshi(0)" :class="[{'btnbox-active':c_time==0}]">今日</button>
							<button @click="change_xingshi(1)" :class="[{'btnbox-active':c_time==1}]">本周</button>
							<button @click="change_xingshi(2)" :class="[{'btnbox-active':c_time==2}]">本月</button>
						</div>
					</div>
					<div id="myChart" style="width: 100%; height: 400px;z-index: 999;margin-top: 36px;"></div>
				</div>
			</div>
			<div class="home-right">
				<div class="home-title">交班记录</div>
				<div class="cheliang-list" style="">
					<el-table :data="tableData1" stripe style="width: 100%">
						<el-table-column prop="carLicensePlateNumber" label="车牌">
						</el-table-column>
						<el-table-column prop="handOverTime" label="时间" width="180">
						</el-table-column>
						<el-table-column prop="drivingMileage" label="里程">
						</el-table-column>
						<el-table-column prop="status" label="状态">
							<template slot-scope="scope">
								<span v-if="scope.row.status == 1">交接中</span>
								<span v-if="scope.row.status != 1">未交接</span>
							</template>
						</el-table-column>
					</el-table>
				</div>

			</div>
		</div>
	</div>

</template>
<script type="text/javascript">
	import eventBus from '@/assets/js/eventBus'

	export default {
		data() {
			return {
				show_type: 0,
				cishuzongji: "--",
				cishu: [],
				lichengzongji: "--",
				licheng: [],
				yingshouzongji: "--",
				yingshou: [],
				chart: '',
				switch_show: 1, //1显示营收 2显示次数 3显示里程
				c_time_show: 2, //2 昨日 1今日 3近七天 4近一月
				time_show: 2, // 1今日 2昨日 3近七天 4近一个月
				tableData: [],

				c_xingshilicheng: '--',
				c_huandiancishu: '--',
				c_huandianjine: '--',
				tableData1: [],
				chart1: '',
				c_licheng:'',
				eId: '',
				c_time: 2, //0今天 1本周  2本月


			}
		},
		mounted() {
			this.show_type = localStorage.getItem('type');
			if (this.show_type == 0) {
				this.get_huandiancishu();
				this.get_huandianlicheng();
				this.get_huandianyingshou();
				this.get_huandianyingshou1();
				this.get_worklist();
				this.myChart = this.$echarts.init(document.getElementById('myChart'));
			} else if (this.show_type == 1) {
				this.eId = localStorage.getItem('eId');
				this.get_c_huandiancishu();
				this.get_c_xingshilicheng();
				this.get_c_huandianjine();
				this.get_carlist();
			}
			this.myChart = this.$echarts.init(document.getElementById('myChart'));
		},
		methods: {
			show_chart1() {
				var name = 'km';
				var color = '#6fd979';
				var data = [];
				var data1 = [];
				for (let key in this.c_licheng) {
					data.push(key);
					if (this.c_licheng[key] != null)
						data1.push(this.c_licheng[key].mileage);
				}
				var series = {
					name: name,
					type: 'bar',
					data: data1,
					itemStyle: {
						normal: {
							color: color, //设置所有柱状图颜色
						}
					}
				}
				var option = {

					tooltip: {},
					legend: {
						x: 'left',
						data: [name],
						padding: [0, 0, 0, 80],
					},
					xAxis: {
						data: data
					},
					yAxis: {},
					series: series
				};

				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);
			},
			change_xingshi(type) {
				this.c_time = type;
				this.get_c_xingshilicheng();
			},
			get_carlist() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'vehicle/handover/findPage', {
						"limit": "7",
						"page": "1"
					})
					.then(function(res) {
						if (res != '') {
							self.tableData1 = res.data.list;
						}

					})
			},
			get_c_huandiancishu() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'vehicleExec/vehicleStatistics/count/vehicleSwitchStatistics', {
						"enterpriseId": localStorage.getItem('eId')
					})
					.then(function(res) {
						if (res != '') {
							self.c_huandiancishu = res.data.countNum;
							self.c_huandianjine = res.data.countPayAmountSum;
							//self.cishuzongji = res.data.countNum;

						}

					})
			},
			get_c_xingshilicheng() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'vehicleExec/vehicleStatistics/count/vehicleMileageStatistics', {
						'timeIntervalType': this.c_time,
						"enterpriseId": localStorage.getItem('eId')
					})
					.then(function(res) {
						if (res != '') {
							self.c_xingshilicheng = res.data.countNum;
							self.c_licheng = res.data.dataContent;
							console.log(self.c_licheng);
							self.show_chart1();
							//self.cishuzongji = res.data.countNum;

						}

					})
			},
			get_c_huandianjine() {

			},
			show_work_detail() {
				eventBus.$emit('control','/workform/nextStep');

			},
			get_worklist() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'work/workform/findPage', {
						"page": {
							"size": 7,
							"current": 1,
							"orders": [{
								"column": "create_date",
								"asc": false
							}]
						},
						"params": {}
					})
					.then(function(res) {
						if (res != '') {
							self.tableData = res.data.records;

						}

					})
			},
			change_time(type) {
				this.time_show = type;
				this.get_huandianyingshou();
				this.get_huandiancishu();
				this.get_huandianlicheng();
			},
			change_c(type) {
				this.c_time_show = type;
				if (this.switch_show == 1) {
					this.get_huandianyingshou1();
				} else if (this.switch_show == 2) {
					this.get_huandiancishu1();
				} else {
					this.get_huandianlicheng1();
				}
			},
			change_show(type) {
				this.switch_show = type;
				if (type == 1) {
					this.get_huandianyingshou1();
				} else if (type == 2) {
					this.get_huandiancishu1();
				} else {
					this.get_huandianlicheng1();
				}
			},
			show_chart(type) {
				if (type == 1) {
					var name = '收入(元)';
					var color = '#5f8af9';
					var data = [];
					var data1 = [];
					for (let key in this.yingshou) {
						data.push(key);
						if (this.yingshou[key] != null)
							data1.push(this.yingshou[key].counts);
					}
					var series = {
						name: name,
						type: 'bar',
						data: data1,
						itemStyle: {
							normal: {
								color: color, //设置所有柱状图颜色
							}
						}
					}

				} else if (type == 2) {
					var name = '次';
					var color = '#f9b25f';
					var data = [];
					var data1 = [];
					for (let key in this.cishu) {
						data.push(key);
						if (this.cishu[key] != null)
							data1.push(this.cishu[key].counts);
					}
					var series = {
						name: name,
						type: 'bar',
						data: data1,
						itemStyle: {
							normal: {
								color: color, //设置所有柱状图颜色
							}
						}
					}
				} else if (type == 3) {
					var name = 'km';
					var color = '#6fd979';
					var data = [];
					var data1 = [];
					for (let key in this.licheng) {
						data.push(key);
						if (this.licheng[key] != null)
							data1.push(this.licheng[key].counts);
					}
					var series = {
						name: name,
						type: 'bar',
						data: data1,
						itemStyle: {
							normal: {
								color: color, //设置所有柱状图颜色
							}
						}
					}
				}
				var option = {

					tooltip: {},
					legend: {
						x: 'left',
						data: [name],
						padding: [0, 0, 0, 80],
					},
					xAxis: {
						data: data
					},
					yAxis: {},
					series: series
				};

				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);
			},
			get_huandiancishu() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/stationStatistics/stationSwitchStatistics', {
						"groupBy": 1,
						"timeData": this.time_show,
					})
					.then(function(res) {
						if (res != '') {
							self.cishuzongji = res.data.countNum;

						}

					})
			},
			get_huandiancishu1() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/stationStatistics/stationSwitchStatistics', {
						"groupBy": 1,
						"timeData": this.c_time_show,
					})
					.then(function(res) {
						if (res != '') {
							self.cishu = res.data.dataContent;
							if (self.switch_show == 2) {

								self.show_chart(2);
							}
						}

					})
			},
			get_huandianlicheng() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/stationStatistics/stationMileageStatistics', {
						"groupBy": 1,
						"timeData": this.time_show,
					})
					.then(function(res) {
						if (res != '') {

							self.lichengzongji = res.data.countNum;
						}

					})
			},
			get_huandianlicheng1() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/stationStatistics/stationMileageStatistics', {
						"groupBy": 1,
						"timeData": this.c_time_show,
					})
					.then(function(res) {
						if (res != '') {
							self.licheng = res.data.dataContent;
							if (self.switch_show == 3) {
								self.show_chart(3);
							}
						}

					})
			},
			get_huandianyingshou() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/stationStatistics/stationRevenueStatistics', {
						"groupBy": 1,
						"timeData": this.time_show,
					})
					.then(function(res) {
						if (res != '') {
							self.yingshouzongji = res.data.countNum;

						}

					})
			},
			get_huandianyingshou1() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/stationStatistics/stationRevenueStatistics', {
						"groupBy": 1,
						"timeData": this.c_time_show,
					})
					.then(function(res) {
						if (res != '') {
							self.yingshou = res.data.dataContent;
							if (self.switch_show == 1) {
								self.show_chart(1);
							}
						}

					})
			}

		}
	}
	import '@/assets/css/home.css';
</script>
<style>
	.home-left {
		float: left;
		width: 1088px;

	}

	.home-left-top {
		width: 1088px;
		height: 260px;
		margin-bottom: 24px;
		background: #fff;
	}

	.home-title {
		float: left;
		font-size: 16px;
		color: #606B82;
		margin-top: 20px;
		margin-left: 20px;
	}

	.home-right-btnbox {
		float: right;
		margin-top: 20px;
		margin-right: 20px;

	}

	.home-right-btnbox>button {
		width: 80px;
		height: 30px;
		line-height: 30px;
		color: #606B82;
		border: 1px solid #606B82;
		border-radius: 30px;
		margin-left: 12px;
		background-color: #fff;
	}

	.home-right-btnbox>button:hover {
		cursor: pointer;
		background-color: #8fa6c9 !important;
		color: #fff !important;
		border: none !important;
	}

	.btnbox-active {
		background-color: #8fa6c9 !important;
		color: #fff !important;
		border: none !important;
	}

	.data-item {
		float: left;
		margin-top: 30px;
		text-align: center;
	}

	.data-item-1 {
		width: 30%;
	}

	.data-item-2 {
		width: 30%;
	}

	.data-item-3 {
		width: 40%;
	}

	.data-item-1>div {
		color: #565656;
	}

	.data-item-2>div {
		color: #565656;
	}

	.data-item-3>div {
		color: #FD943F;
	}

	.data-item>div {
		font-size: 70px;
		font-weight: bold;
	}

	.data-item>span {
		color: #606B82;
	}

	.home-left-bottom {
		background-color: #fff;
		height: 500px;
	}

	.chart-btnbox {
		margin: 20px 0 0 20px;
		float: left;
	}

	.chart-btnbox>button {
		color: #606B82;
		font-size: 16px;
		border: none;
		background: none;
		margin-right: 10px;
		height: 44px;
		line-height: 44px;
		padding: 0 18px;
	}

	.chart-btnbox>button:hover {
		cursor: pointer;
		background: #2E76E2 !important;
		color: #fff !important;
		border-radius: 30px;
		height: 44px;
		line-height: 44px;
		padding: 0 18px;
	}

	.chart-btnbox-active {
		background: #2E76E2 !important;
		color: #fff !important;
		border-radius: 30px;
		height: 44px;
		line-height: 44px;
		padding: 0 18px;
	}

	.home-right {
		height: 784px;
		width: 544px;
		background-color: #fff;
		float: right;
		box-sizing: border-box;
	}

	.gongdang-list {
		border-top: 1px solid #b8becc;
		border-left: 1px solid #b8becc;
		border-right: 1px solid #b8becc;
		margin: 60px 20px 0 20px;
	}

	.home-right-item {
		width: 100%;
		height: 82px;
		border-bottom: 1px solid #b8becc;
		box-sizing: border-box;
		padding: 7px;

	}

	.home-right-item:hover {
		background-color: #EDF2F5;
		cursor: pointer;

	}

	.h-item-1 {
		background-color: #76a3ff;
		height: 68px;
		line-height: 68px;
		text-align: center;
		float: left;
		width: 35px;
		color: #fff;
		font-size: 30px;
	}

	.h-item-2 {
		float: left;
		margin-left: 15px;
		padding-top: 5px;
	}

	.h-item-2>span {
		font-size: 20px;
		color: #272B33;
	}

	.h-item-2>div {
		margin-top: 12px;
		font-size: 16px;
		color: #606B82;
	}

	.h-item-3 {
		float: right;
		color: #606B82;
		margin-top: 5px;
	}

	.cheliang-list {
		margin: 60px 20px 0 20px;
	}
</style>
